var cDate = new Date();
var cTime = [String(cDate.getFullYear()),
    String(cDate.getMonth()+1),
    String(cDate.getDate()),
    String(cDate.getHours()),
    String(cDate.getMinutes()),
    String(cDate.getSeconds())];

var myChart = echarts.init(document.getElementById("main_2"));

$(document).ready(function() {
	$(".chart_main").css("width", $(".chart_main").height()+"px");
	
    $(window).resize(function() {
        myChart.resize();
    });
    
    $.get("DataServlet?type=dynaChart2", function(data,status){
    	//alert(data);
    	var jsonObj = eval('(' + data + ')');
    	
    	option = {
    		title: {
    			show: true,
    			text: '实时温度',
    			textStyle: {
    				color: '#ddd'
    			},
    			x: 'center',
    			y: 'bottom',
    		},
    	    tooltip : {
    	    	show: true,
    	    	trigger: 'item',
    	    	axisPointer: {
    	    		type: 'cross',
    	    	},
    	        formatter: "{a} : {c}℃"
    	    },
    	    series : [
    	        {
    	            name:'气温',
    	            type:'gauge',
    	            radius: '100%',
    	            min: 10,
    	        	max: 30,
    	            detail : {formatter:'{value}摄氏度'},
    	            data:[jsonObj],
    	            title: {
    	            	show: false,
    	            },
    	       		axisLine: {
    			    	show: true,
    			    	lineStyle: {
    			    		width: 10,
    			    	}
    			    },
    			    splitLine: {
    			    	show: true,
    			    	length: 10,
    			    },
    	            pointer: {
    	            	show: true,
    	            	length: '80%',
    	            	width: 4,
    	            },
    	            itemStyle: {
    	            	emphasis: {
    	            		color: 'white',
    	            		borderColor: 'black',
    	            	},
    	            },
    	            title: {
    	            	show: false,
    	            	offsetCenter: [0, '-40%']
    	            }
    	        }
    	    ],
    	    textStyle: {
    	    	color: '#ddd',
    	    }
    	};
    	myChart.setOption(option);
    	myChart.resize();
    });


    setInterval(function () {
    	$.get("DataServlet?type=dynaChart2", function(data,status){
    		var jsonObj = eval('(' + data + ')');
    		myChart.setOption({
    			 series : [
	    	        {
	    	            data:[jsonObj]
	    	        }
	    	    ]
    	    });
    	});
    }, 5000);
});